<!-- 音乐-首页 -->
<script setup>
import {ref,onMounted} from "vue"
import swiper2 from "../../../components/swiper2.vue"
import MusicBottomPlayer from "../../../components/MusicBottomPlayer.vue"

import cwzz_fm from "../../../../public/images/music/cwzz.jpg"
import jx_chang from "../../../../public/images/music/jx_chang.jpg"
import mygo_chang from "../../../../public/images/music/mygo_chang.jpg"
import axios from "axios"
import MusicTJBox from "../../../components/MusicTJBox.vue"

const music_name1 = "全力キング.flac"
const music_name2 = "01.覚醒.flac"
const music_name3 = "影色舞.mp3"

const image1Url = ref(cwzz_fm)
const image2Url = ref(jx_chang)
const image3Url = ref(mygo_chang)

const wucha = ref(300)
const music_name = ref("")
const music_array = ref([]) //音乐数组

axios.get('http://localhost:8091/music_all_find').then(async(res)=>{
    // console.log(res.data)
    music_array.value = await res.data
    // console.log('music_array:',music_array.value[0])
}).catch(err=>console.log(err))

const reuturnBtnHandler = (musicSwiperValue)=> {
    console.log(musicSwiperValue)
    switch(musicSwiperValue){
        case 1:
            music_name.value = music_name1
            break
        case 2:
            music_name.value = music_name2
            break
        case 3:
            music_name.value = music_name3
            break
    }
}

const reuturnBtnMusicHandler = (music_file_name) => {
    // console.log(music_file_name)
    axios.get(`http://localhost:8091/music_find_id?id=${music_file_name}`).then(async res => {
        // console.log(res.data)
        music_name.value = await res.data.file_name
    }).catch(err=>console.log(err))
}

</script>

<template>
    <div class="swiperBox">
        <swiper2 
            :image1Url="image1Url"
            :image2Url="image2Url"
            :image3Url="image3Url"

            @reuturnBtn="reuturnBtnHandler"
        />
    </div>
    <div class="tuijianBox">
        <!-- <img :src="music_detail.file_image" alt="" /> -->
        <div v-for="music_detail in music_array">
            <MusicTJBox  
                :music_image="music_detail.file_image"
                :num1="music_detail.id"
                :name="music_detail.file_cast_name"
                @reuturnBtn="reuturnBtnMusicHandler"
            />
        </div>
    </div>

    <div class="">
        <MusicBottomPlayer 
        :music_name="music_name"
        :wucha="wucha"/>
    </div>
</template>

<style scoped>
.swiperBox{
    width: 100%;
    height: 50%;
    /* background-color: red; */
}
.tuijianBox{
    width: 100%;
    height: 50%;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
}
</style>